<template>
  <div class="stores-list" style="width:100%">
  <div>
  <div class="header">
      <el-menu background-color="#eee" text-color="#303133" class="el-menu-demo" mode="horizontal" router>
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item>店铺列表</el-menu-item>
        <el-menu-item>店铺信息</el-menu-item>
      </el-menu>
  </div>
  <div  style="margin-left:20px">
   <el-card style="margin-top:20px">
    <el-form :model="form" inline size="mini" ref="queryform">
      <el-form-item label="店铺编号" prop="num">
        <el-input v-model="form.num"></el-input>
      </el-form-item>
   <el-form-item label="行业"  prop="type">
    <el-select v-model="form.type" placeholder="选择分类">
      <el-option v-for="(item,index) in types" :label="item.name" :value="item.name" :key="index"></el-option>
    </el-select>
    </el-form-item>
    <el-form-item>
    <el-button type="primary" @click="onQuery">查询</el-button>
    <el-button @click="onReset">重置</el-button>
    </el-form-item>
    </el-form>
  </el-card>
  <!-- 统计区域 -->
  <el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple">店铺数量：{{stores_num}}</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">已运营的店铺数量：{{online_num}}</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">销售总额：{{total_sales}}</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
  <el-card>
    <!-- 店铺列表区域 -->
    <el-table
    :row-style="{padding:0}"
      size="mini"
      :fit="false"
      :data="tableData"
    >
      <el-table-column
        prop="num"
        label="店铺编号">
      </el-table-column>
      <el-table-column
        prop="name"
        label="店铺名称"
        width="110">
      </el-table-column>
      <el-table-column
        prop="industry"
        label="行业">
      </el-table-column>
      <el-table-column
        width="160"
        prop="address"
        label="店铺地址">
      </el-table-column>
      <el-table-column
      width="100"
        prop="mobile"
        label="店铺电话">
      </el-table-column>
      <el-table-column
        prop="rights"
        label="店铺权益">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.rights===1" type="primary">一级</el-tag>
          <el-tag v-else-if="scope.row.rights===2" type="success">二级</el-tag>
          <el-tag v-else-if="scope.row.rights===3" type="warning">三级</el-tag>
          <span v-else>无权限</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="rights_time"
        label="权限期限">
      </el-table-column>
      <el-table-column
        prop="sales"
        label="销售额">
      </el-table-column>
      <el-table-column
        label="运营状态">
        <template slot-scope="scope">
          <el-switch
          @change="changeStatus(scope.row)"
          v-model="scope.row.status"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
      </template>
      </el-table-column>
      <el-table-column
        prop="remarks"
        label="备注">
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
        <el-button size="mini" @click="$router.push('/goodslist')">查看商品</el-button>
        <el-button size="mini" type="danger" @click="deleteStore(scope.row)">删除</el-button>
        <el-button size="mini" type="primary" @click="editStore(scope.row)">编辑</el-button>
      </template>
      </el-table-column>
    </el-table>
  </el-card>
  </div>
  </div>
  </div>
</template>
<script>
export default {
  name: 'storeList',
  data () {
    return {
      types: [],
      form: {
        num: '',
        type: ''
      },
      tableData: []
    }
  },
  methods: {
    async loadBusinesses() {
      const { data } = await this.$http.get('/businesses')
      this.types = data
    },
    async getStoreList () {
      const data = await this.$http.get('/stores')
      this.tableData = data.data
    },
    // 查询
    async onQuery () {
      // 如果没有选择或者输入任何条件, 查询所有数据
      if (this.form.num + this.form.type === '') {
        return
      }
      // 先将数据清空
      this.tableData = []
      // 按照编号发送请求进行模糊查询
      if (this.form.num !== '') {
        const { data: res } = await this.$http.get(`/stores?num_like=${this.form.num}`)
        this.tableData = res
      }
      if (this.form.type !== '') {
        // 按照行业发送请求进行模糊查询
        const { data: res3 } = await this.$http.get(`/stores?industry=${this.form.type}`)
        res3.forEach((item2) => {
          if (!this.tableData.find((subitem) => subitem.id === item2.id)) {
            this.tableData.push(item2)
          }
        })
      }
    },
    onReset () {
      this.$refs.queryform.resetFields()
    },
    deleteStore (row) {
      const id = row.id
      this.$confirm('此操作将永久删除该店铺, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = await this.$http.delete(`/stores/${id}`)
        if (data.status === 200) {
          this.$message({ type: 'success', message: '删除成功!' })
          this.getStoreList()
        } else {
          this.$message.error('操作失败')
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    editStore (row) {
      const id = row.id
      this.$router.push(`/store-edit/${id}`)
    },
    async changeStatus (store) {
      const data = await this.$http.put(`/stores/${store.id}`, store)
      if (data.status !== 200) {
        this.$message.error('更新状态失败')
      }
      this.$message.success('更新状态成功')
      this.getStoreList()
    }
  },
  computed: {
    stores_num () {
      return this.tableData.length
    },
    online_num () {
      var newarr = this.tableData.filter(item => item.status)
      return newarr.length
    },
    total_sales () {
      var total = 0
      this.tableData.forEach(item => {
        total += item.sales
      })
      return total
    }
  },
  created () {
    this.loadBusinesses()
    this.getStoreList()
  }
}
</script>
<style scoped>
.el-row {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  color: #777;
}
.store-list {
  margin-left:20px
}
</style>
